<template>
  <view class="cateContainer">
    <!-- 搜索组件 S-->
    <mySearch id="mySearch" v-if="searchShow"></mySearch>
    <!-- 搜索组件 E-->
    <!-- 容器区域 S -->
    <view class="boxContainer" :style="'height:'+(wh-searchHeight)+'px'">
      <!-- 左侧 S-->
      <scroll-view class="nav" scroll-y>
        <view @click="changeActive(item)" v-for="item in cateList" :class="{ active:activeCate.id === item.id }"
          :key="item.id">{{item.name}}</view>
      </scroll-view>
      <!-- 左侧 E-->
      <!-- 右侧 S-->
      <view class="cate">
        <!-- 图片 -->
        <image class="cateImg" :src="activeCate.img_url"></image>
        <!-- 滚动商品容器 S-->
        <scroll-view scroll-y class="listBox" @scrolltolower="loadMore"
          :style="'height:'+(wh-searchHeight-imgHeight)+'px'">
          <!-- 商品列表 -->
          <goodList :list="list" v-if="list.length" :desc="false"></goodList>
          <u-loadmore :status="status" v-if="list.length" />
          <!-- 空的状态 -->
          <u-empty mode="list" v-if="list.length ===0" marginTop="200rpx"></u-empty>
        </scroll-view>
        <!-- 滚动商品容器 E-->
      </view>
      <!-- 右侧 E-->
    </view>
    <!-- 容器区域 E -->
  </view>
</template>

<script>
  import setBadge from '@/mixins/setBadge.js'
  export default {
    mixins: [setBadge],
    data() {
      return {
        // 控制搜索组件显示
        searchShow: false,
        wh: 0, // 窗口高度
        searchHeight: 0, // 搜索框的高度
        imgHeight: 0, // 分类图片高度
        // 1.定义分类数据和激活分类信息
        cateList: [],
        activeCate: {},
        // 商品列表相关参数
        count: 0, // 总数
        currentPage: 1, // 页码
        pageSize: 8, // 每页数量
        list: [], // 商品列表
        status: 'loadmore', // 数据状态
      };
    },
    mounted() {
      // 获取设备高度
      uni.getSystemInfo({
        success: res => {
          // 获取设备高度
          this.wh = res.windowHeight
        }
      })
      // 得到选择器对象
      const query = uni.createSelectorQuery().in(this);
      // 找到搜索框，调用boundingClientRect，回调里面形参data就是想要的组件节点数据了
      query.select('#mySearch').boundingClientRect(data => {
        // data就是该节点的位置和高度相关信息
        this.searchHeight = data.height
      }).exec();
      // 获取图片高度
      query.select('.cateImg').boundingClientRect(data => {
        // data就是该节点的位置和高度相关信息
        this.imgHeight = data.height
      }).exec();
      // 总结:uni.createSelectorQuery().in(this).select(选择器).boundingClientRect(data=>{data就是}).exec()
    },
    onShow() {
      // 搜索组件被创建了
      this.searchShow = true
      // 3. 调用获取数据
      this.getAllCate()
    },
    onHide() {
      // 搜索组件关闭了
      this.searchShow = false
      // 离开页面的时候，清除分类信息
      uni.removeStorageSync('cateId')
    },
    methods: {
      // 2. 定义获取全部分类方法
      async getAllCate() {
        let res = await uni.$http.get('/catalog/index')
        this.cateList = res.categoryList
        // 只有当有数据才确定激活分类信息
        if (this.cateList.length) {
          // 从本地取出cateId
          const cateId = uni.getStorageSync('cateId')
          if (cateId) {
            // 是从首页点击了分类项目或者分类标题，才跳转过来的
            let row = this.cateList.find(item => item.id === cateId) // 通过id，找到分类的完整信息
            this.changeActive(row) //类似模拟左侧点击了一下，传入分类信息【复用了重置吗、逻辑，获取列表逻辑】
          } else {
            // 直接点击了tabBar分类过来的
            this.activeCate = this.cateList[0]
            // 第一次请求激活分类下的商品信息
            this.getGoodList()
          }
        }
      },
      // 获取商品列表的方法
      async getGoodList() {
        this.status = 'loading' // 数据加载中...
        // 请求数据
        let {
          count,
          data
        } = await uni.$http.post('/catalog/currentlist', {
          id: this.activeCate.id,
          page: this.currentPage,
          size: this.pageSize
        })
        // 赋值
        this.list = [...this.list, ...data] //赋值不对！移动端的列表是不断变长的，所以list应该不断变大
        this.count = count
        // 判断结束
        if (this.list.length === this.count) {
          // 没有了
          this.status = 'nomore'
        } else {
          // 还有
          this.status = 'loadmore'
        }
      },
      // 滚动加载更多数据
      loadMore() {
        console.log('滚动加载更多数据')
        //  loadmore 加载更多，表示还可加载
        //  loading  加载中， 不可以继续加载
        //  nomore   没有了，不可以加载
        // 只有status为loadmore
        if (this.status !== 'loadmore') return
        // 页码变化
        this.currentPage++
        // 重新获取请求
        this.getGoodList()
      },
      // 左侧分类切换
      changeActive(row) {
        // console.log(row);
        // 修改激活分类信息
        this.activeCate = row
        // 重置相关数据
        this.list = []
        this.count = 0
        this.status = 'loadmore'
        this.currentPage = 1
        // 重新获取列表
        this.getGoodList()
      }
    },

  }
</script>

<style lang="scss" scoped>
  .cateContainer {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;

    .boxContainer {
      display: flex;
      flex: 1;

      .nav {
        width: 180rpx;
        border-right: 1rpx solid #fafafa;
        height: 100%;

        view {
          line-height: 100rpx;
          text-align: center;
          color: #333;
          font-size: 30rpx;
        }

        .active {
          color: #409eff;
          font-size: 32rpx;
        }
      }

      .cate {
        flex: 1;
        padding: 0 20rpx;
        height: 100%;
        flex-direction: column;

        .cateImg {
          width: 100%;
          height: 160rpx;
        }
      }

      .listBox {
        flex: 1;
      }
    }
  }
</style>
